<template>
  <div class="goods">
    <!-- 轮播图 -->
    <div class="swiper">
      <slider class="swiper-container" :auto-play="false" interval="3000">
        <div class="swiper-item" v-for="item in gallery" :key="item.id">
          <image class="image" :src="item.img_url" />
        </div>
        <indicator class="dot-con" item-color="red"></indicator>
      </slider>
      <button class="share" hover-class="none" open-type="share" value="">分享商品</button>
    </div>

    <div class="swiper-b">
      <text class="item">30天无忧退货</text>
      <text class="item">48小时快速退款</text>
      <text class="item">满88元免邮费</text>
    </div>
    <!-- 商品基本信息 -->
    <div class="goods-info">
      <div class="c">
        <p>{{ info.name }}</p>
        <p>{{ info.goods_brief }}</p>
        <p>￥{{ info.retail_price }}</p>
        <div v-if="brand.name" class="brand">
          <p>{{ brand.name }}</p>
        </div>
      </div>
    </div>

    <!-- 请选择规格数量 -->
    <div @click="showType" class="section-nav">
      <text>请选择规格数量</text>
      <div></div>
    </div>
    <!-- 商品参数 -->
    <div v-if="attribute.length != 0" class="attribute">
      <text class="head">商品参数</text>
      <div v-for="(item, index) in attribute" :key="index" class="item">
        <text>{{ item.name }}</text>
        <text>{{ item.value }}</text>
      </div>
    </div>

    <!-- 商品描述 -->
    <div v-if="goods_desc" class="detail">
      <div v-html="goods_desc"></div>
    </div>

    <!-- 常见问题 -->
    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <text class="title">常见问题</text>
        <div class="line"></div>
      </div>
      <div class="b">
        <div class="item" v-for="item in issueList" :key="item.id">
          <div class="question-box">
            <text class="spot"></text>
            <text class="question">{{ item.question }}</text>
          </div>
          <div class="answer">
            {{ item.answer }}
          </div>
        </div>
      </div>
    </div>

    <!-- 大家都在看 -->
    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <text class="title">大家都在看</text>
        <div class="line"></div>
      </div>
      <div class="sublist">
        <div @click="togoodsDetail(subitem.id)" v-for="(subitem, subindex) in productList" :key="subindex">
          <img class="img" :src="subitem.list_pic_url" alt="" />
          <p>{{ subitem.name }}</p>
          <p>￥{{ subitem.retail_price }}</p>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-fixed">
      <div @click="collect">
        <div class="collect" :class="[collectFlag ? 'active' : '']"></div>
      </div>
      <div @click="toCart">
        <div class="car">
          <span>
            {{ allnumber }}
          </span>
          <img class="img" src="/static/images/ic_menu_shoping_nor.png" alt="" />
        </div>
      </div>
      <div><text @click="bug">立即购买</text></div>
      <div><text @click="addCart">加入购物车</text></div>
    </div>

    <!-- 选择规格部分 -->
    <div v-show="showpop" @click="showType" class="pop"></div>
    <div class="attr-pop" :class="[showpop ? 'fadeup' : 'fadedown']">
      <div class="top">
        <div class="left">
          <img class="img" :src="info.primary_pic_url" alt="" />
        </div>
        <div class="right">
          <div>
            <p>价格￥{{ info.retail_price }}</p>
            <p>请选择数量</p>
          </div>
        </div>
        <div @click="showType" class="close"><text>X</text></div>
      </div>
      <div class="b">
        <p>数量</p>
        <div class="count">
          <div @click="reduce" class="cut"><text>-</text></div>
          <input class="number" disabled="" v-model="number" />
          <div @click="add" class="add"><text>+</text></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  login,
  // getStorageOpenid,
  toLogin,
} from '@/utils'
import data from './data'
export default {
  data() {
    return {
      data,
      allnumber: 0,
      openId: '',
      collectFlag: false,
      number: 0,
      showpop: false,
      gallery: [],
      info: {},
      brand: {},
      attribute: [],
      issueList: [],
      productList: [],
      goods_desc: '',
      id: '',
      userInfo: '',
      goodsId: '',
      allPrise: '',
    }
  },
  components: {},
  mounted() {
    // 判断是否登录获取用户信息
    if (login()) {
      this.userInfo = login()
    }
    console.log(this.$route.query.id)
    this.id = this.$route.query.id
    // this.openId = getStorageOpenid();
    this.goodsDetail()
  },
  onShareAppMessage() {
    return {
      title: this.info.name,
      path: '/pages/goods/main?id=' + this.info.id,
      imageUrl: this.gallery[0].img_url, // 拿第一张商品的图片
    }
  },
  methods: {
    toCart() {
      // wx.switchTab({
      //   url: "/pages/cart/main",
      // });
    },
    add() {
      this.number = this.number + 1
    },
    reduce() {
      if (this.number > 1) {
        this.number = this.number - 1
      } else {
        return false
      }
    },
    togoodsDetail(id) {
      this.id = id
      this.goodsDetail()
      this.$forceUpdate()
      // this.$router.push({
      //   path:'/goods',
      //   query:{
      //     id
      //   }
      // })
      // wx.redirectTo({ url: "/pages/goods/main?id=" + id });
    },
    showType() {
      this.showpop = !this.showpop
    },
    async goodsDetail() {
      const data = this.data;
      //  await this.commonApi({
      //   url: '/goods/detailaction',
      //   method: 'get',
      //   title: '获取商品详情',
      //   params: {
      //     id: this.id,
      //     openId: this.openId,
      //   },
      // })
      this.gallery = data.gallery
      this.info = data.info
      this.allPrise = data.info.retail_price
      this.goodsId = data.info.id
      this.brand = data.brand
      this.attribute = data.attribute
      this.goods_desc = data.info.goods_desc
      this.issueList = data.issue
      this.collectFlag = data.collected
      this.allnumber = data.allnumber
      this.productList = data.productList
    },
    async bug() {
      if (toLogin()) {
        if (this.showpop) {
          if (this.number === 0) {
            // wx.showToast({
            //   title: "请选择商品数量", // 提示的内容,
            //   duration: 2000, // 延迟时间,
            //   icon: "none",
            //   mask: true, // 显示透明蒙层，防止触摸穿透,
            //   success: (res) => {},
            // });
            return false
          }
          console.log(this.goodsId)
          console.log(this.openId)

          const data = await this.commonApi({
            url: '/order/submitAction',
            title: '',
            method: 'post',
            params: {
              goodsId: this.goodsId,
              openId: this.openId,
              allPrise: this.allPrise,
            },
          })
          if (data) {
            // wx.navigateTo({
            //   url: "/pages/order/main",
            // });
          }
        } else {
          this.showpop = true
        }
      }
    },
    async collect() {
      if (toLogin()) {
        this.collectFlag = !this.collectFlag
        await this.commonApi({
          url: '/collect/addcollect',
          method: 'post',
          params: {
            openId: this.userInfo.openId,
            goodsId: this.goodsId,
          },
        })
      }
    },
    async addCart() {
      if (toLogin()) {
        if (this.showpop) {
          if (this.number === 0) {
            // wx.showToast({
            //   title: "请选择商品数量", // 提示的内容,
            //   duration: 2000, // 延迟时间,
            //   icon: "none",
            //   mask: true, // 显示透明蒙层，防止触摸穿透,
            //   success: (res) => {},
            // });
            return false
          }
          const data = await this.commonApi({
            url: '/cart/addCart',
            method: 'post',
            title: '添加商品',
            params: {
              openId: this.userInfo.openId,
              goodsId: this.goodsId,
              number: this.number,
            },
          })
          // 添加成功后
          if (data) {
            this.allnumber = this.allnumber + this.number
            // wx.showToast({
            //   title: "添加购物车成功",
            //   icon: "success",
            //   duration: 1500,
            // });
          }
        } else {
          this.showpop = true
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
